<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="填写资料"
      :ghost="false"
      @back="() => $router.go(-1)"
    ></a-page-header>
    <page-header-wrapper>
      <a-card :bordered="false">
        <div class="title">申请资料填写</div>
        <a-form-model
          ref="ruleForm"
          v-if="type == 0"
          :model="form"
          :rules="rules"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 11 }"
        >
          <a-form-model-item label="公司营业执照">
            <cyyUploadImg
              @uploadSuccess="e => choosePic(e, 'wechat')"
              @deleteImg="form.license_pic = ''"
              :imgSrc="form.license_pic"
            >
            </cyyUploadImg>
          </a-form-model-item>
          <a-form-model-item label="公司名称" prop="name">
            <a-input v-model="form.name" placeholder="请输入公司名称" />
            <div class="tip">
              需与当地政府颁发的商业许可证书或企业注册证上的企业名称完全一致，信息审核成功后，企业名称不可修改。
            </div>
          </a-form-model-item>
          <a-form-model-item label="企业代码类型" prop="code_type">
            <a-radio-group v-model="form.code_type">
              <a-radio value="1"> 统一社会信用代码（18位） </a-radio>
              <a-radio value="2"> 组织架构代码（9位xxxxxxxxxx-x） </a-radio>
              <a-radio value="3"> 营业执照注册号（15位） </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="企业代码" prop="code">
            <a-input v-model="form.code" placeholder="请输入企业代码" />
            <div class="tip">需国家统一规定的企业（单位）法人代码。代码由8位无属性的数字和一位校验码</div>
          </a-form-model-item>
          <a-form-model-item label="法人微信账号" prop="legal_persona_wechat">
            <a-input v-model="form.legal_persona_wechat" placeholder="请输入法人微信账户" />
            <div class="tip">作为登录账号，请填写未被微信公众平台注册，未被微信开放平台注册的微信号</div>
          </a-form-model-item>
          <a-form-model-item label="法人姓名" prop="legal_persona_name">
            <a-input v-model="form.legal_persona_name" placeholder="请输入法人姓名" />
            <div class="tip">
              作为登录账号，请填写未被微信公众平台注册，未被微信开放平台注册，未被个人微信号绑定的邮箱
            </div>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSubmit"> 提交 </a-button>
            <a-button style="margin-left: 10px" @click="$router.go(-1)"> 取消 </a-button>
          </a-form-model-item>
        </a-form-model>
        <a-form-model
          ref="alipayForm"
          v-if="type == 1"
          :model="alipayForm"
          :rules="alipayRules"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 11 }"
        >
          <a-form-model-item label="公司营业执照" prop="license_pic">
            <cyyUploadImg
              @uploadSuccess="e => choosePic(e, 'alipay')"
              @deleteImg="alipayForm.license_pic = ''"
              :imgSrc="alipayForm.license_pic"
            >
            </cyyUploadImg>
          </a-form-model-item>
          <a-form-model-item label="小程序名称" prop="app_name">
            <a-input v-model="alipayForm.app_name" placeholder="请输入小程序名称" />
          </a-form-model-item>
          <a-form-model-item label="支付宝账户" prop="alipay_account">
            <a-input v-model="alipayForm.alipay_account" placeholder="请输入支付宝账户" />
            <div class="tip">用户提交申请后需要到支付宝信息中心确认申请信息。</div>
          </a-form-model-item>
          <a-form-model-item label="法人姓名" prop="legal_personal_name">
            <a-input v-model="alipayForm.legal_personal_name" placeholder="请输入法人姓名" />
          </a-form-model-item>
          <a-form-model-item label="企业名称" prop="license_name">
            <a-input v-model="alipayForm.license_name" placeholder="请输入企业名称" />
          </a-form-model-item>
          <a-form-model-item label="企业代码" prop="license_no">
            <a-input v-model="alipayForm.license_no" placeholder="请输入企业代码" />
            <div class="tip">需国家统一规定的企业（单位）法人代码。</div>
          </a-form-model-item>
          <a-form-model-item label="商户电话" prop="service_phone">
            <a-input v-model="alipayForm.service_phone" placeholder="请输入商户电话" />
          </a-form-model-item>
          <a-form-model-item label="商户姓名" prop="contact_name">
            <a-input v-model="alipayForm.contact_name" placeholder="请输入商户姓名" />
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSubmit"> 提交 </a-button>
            <a-button style="margin-left: 10px" @click="$router.go(-1)"> 取消 </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </page-header-wrapper>
  </div>
</template>

<script>
import { fastRegister, detail, alipayRegister, alipayDetail, ocr } from '@/api/setting/applet'
import { cyyUploadImg } from '@/components/CyyUi/index'
export default {
  components: {
    cyyUploadImg
  },
  data() {
    let checkPic = (rule, value, callback) => {
      if (this.alipayForm.license_pic == '') {
        callback(new Error('请上传公司营业执照'))
      } else {
        callback()
      }
    }
    return {
      form: {
        license_pic: '',
        name: '',
        code: '',
        code_type: '1',
        legal_persona_wechat: '',
        legal_persona_name: ''
      },
      // 验证规则
      rules: {
        name: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
        code_type: [{ required: true, message: '请选择企业代码类型', trigger: 'change' }],
        code: [{ required: true, message: '请输入企业代码', trigger: 'blur' }],
        legal_persona_wechat: [{ required: true, message: '请输入法人微信账户', trigger: 'blur' }],
        legal_persona_name: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }]
      },
      alipayForm: {
        license_pic: '',
        alipay_account: '',
        legal_personal_name: '',
        license_name: '',
        license_no: '',
        app_name: '',
        service_phone: '',
        contact_name: ''
      },
      // 支付宝验证规则
      alipayRules: {
        license_pic: [{ validator: checkPic }],
        alipay_account: [{ required: true, message: '请输入支付宝账户', trigger: 'blur' }],
        legal_personal_name: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
        license_name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        license_no: [{ required: true, message: '请输入企业代码', trigger: 'blur' }],
        app_name: [{ required: true, message: '请输入小程序名称', trigger: 'blur' }],
        service_phone: [{ required: true, message: '请输入商户电话', trigger: 'blur' }],
        contact_name: [{ required: true, message: '请输入商户姓名', trigger: 'blur' }]
      },
      type: 0 // 0微信 1支付宝
    }
  },
  methods: {
    // 点击提交
    onSubmit() {
      if (this.type == 0) {
        this.$refs.ruleForm.validate(async valid => {
          if (valid) {
            const res = await fastRegister(this.form)
            if (res.code == 0) {
              this.$router.go(-1)
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
      if (this.type == 1) {
        this.$refs.alipayForm.validate(async valid => {
          if (valid) {
            const res = await alipayRegister(this.alipayForm)
            if (res.code == 0) {
              this.$router.go(-1)
            }
          } else {
            return false
          }
        })
      }
    },
    // 获取快速注册小程序的信息
    async getFastInfo(id) {
      const res = await detail({ id })
      console.log(res)
      if (res.code == 0) {
        this.form.id = res.data.id
        this.form.name = res.data.name
        this.form.code = res.data.code
        this.form.code_type = res.data.code_type
        this.form.legal_persona_wechat = res.data.legal_persona_wechat
        this.form.legal_persona_name = res.data.legal_persona_name
        this.form.license_pic = res.data.license_pic
      }
    },
    // 获取注册支付宝小程序的信息
    async alipayDetail(id) {
      const res = await alipayDetail({ id })
      console.log(res, 'ali')
      if (res.code == 0) {
        this.alipayForm = res.data
      }
    },
    // 选中职业执照照片
    choosePic(e, type) {
      if (type == 'wechat') {
        this.form.license_pic = e.data
      }
      if (type == 'alipay') {
        this.alipayForm.license_pic = e.data
      }
      this.analysis(e.data, type)
    },
    // 解析营业执照
    async analysis(url, type) {
      const res = await ocr({ url, type: 1 })
      console.log(res)
      if (res.code == 0) {
        if (type == 'wechat') {
          this.form.name = res.data.name
          this.form.code = res.data.reg_num
          this.form.legal_persona_name = res.data.person
        }
        if (type == 'alipay') {
          this.alipayForm.legal_personal_name = res.data.person
          this.alipayForm.license_name = res.data.name
          this.alipayForm.license_no = res.data.reg_num
        }
      }
      if (res.code == -1) {
        return
      }
    }
  },
  mounted() {
    if (this.$route.query.type) {
      this.type = this.$route.query.type
    }
    if (this.$route.query.id) {
      if (this.type == 0) {
        this.getFastInfo(this.$route.query.id)
      }
      if (this.type == 1) {
        this.alipayDetail(this.$route.query.id)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 14px;
}
.tip {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  line-height: normal;
}
</style>
